<template>
	<a-modal :confirmLoading="handing" width="800px" v-model:open="showForm" @ok="submit" title="编辑角色">
		<a-form ref="form" :model="formData" :rules="rules">
			<a-form-item label="名称" name="name">
				<a-input v-model:value="formData.name" />
			</a-form-item>
			<a-form-item label="权限" name="perms">
				<a-tree-select
					v-model:value="formData.perms"
					:tree-data="perms"
					allow-clear
					tree-checkable
					placeholder="选择权限"
					:tree-line="true"
					:showCheckedStrategy="TreeSelect.SHOW_CHILD"
					tree-node-filter-prop="label"
				>
					<template #notFoundContent>
						<div class="flex justify-center py-lg">
							<LoadingOutlined />
						</div>
					</template>
				</a-tree-select>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script lang="ts">
import {page, form} from "@/mixins"
import {useCacheStore} from '@/stores/cache'
import {mapState} from 'pinia'
import {TreeSelect} from 'ant-design-vue'

export default {
	mixins: [page, form],
	data() {
		return {
			TreeSelect: TreeSelect,
			showForm: false as boolean,
			formPath: 'role',
			activeKey: 0,
			formData: {
				id: 0,
				name: '',
				perms: [],
				status: 1
			},
			rules: {
				name: [{
					required: true,
					message: "名称必须",
					trigger: "blur"
				}],
				role_id: [{
					required: true,
					message: "角色必须",
					trigger: "blur"
				}],
				perms: {
					type: 'array',
					min: 1,
					required: true,
					message: '请选择至少一个权限',
					defaultFeilds: {
						type: 'string',
						required: true
					}
				}
			}
		};
	},
	computed: mapState(useCacheStore, ['perms']),
	methods: {
		add() {
			Object.assign(this.formData, {
				id: undefined,
				name: '',
				perms: [],
				status: 1
			})
			this.showForm = true;
		},
		edit(record : object) {
			Object.assign(this.formData, record);
			this.showForm = true
		},
		afterSubmit(data: object){
			this.$emit('change', data);
			this.showForm = false
		}
	},
};
</script>
